<template>
	<view class="content">
		<view class="shopMain">
			<div class="slide" style="width: 100%;">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item>
						<view class="swiper-item" v-for="(item,index) in shopInfo.thumb" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/shop2.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</div>
			<div class="shopInfo">
				<div class="l">
					<p class="price">¥<span>{{shopInfo.price_old}}</span></p>
					<h3 class="title">{{shopInfo.title}}</h3>
					<p class="type">{{shopInfo.tag}}</p>
				</div>
				<!-- <button open-type="share" class="shareBtn">
					<image src="../../static/images/share.png" mode=""></image>
					<p>分享</p>
				</button> -->
			</div>
			<!-- 
			<div class="pickerSlide">
				<p>选择</p>
				<div class="r">
					<picker mode="selector" :range="array">
						<view>{{array[index]}}</view>
					</picker>
					<p class="jt">
						<image src="../../static/images/jt.png" mode=""></image>
					</p>
				</div>
			</div> -->
			<div class="shaopInfo">
				<div class="tabT">
					<p :class="tabIndex==0?'active':''" @click="tabChange(0)">图文详情</p>
					<p :class="tabIndex==1?'active':''" @click="tabChange(1)">商品参数</p>
				</div>
				<div class="shopImg" v-if="tabIndex==0">
					<div class="notDelivery">
						<span>当前暂不支持邮寄地址：</span>
						<p>{{shopInfo.notDelivery}}</p>
					</div>
					<!-- <image src="../../static/images/shop2.jpg" mode="widthFix"></image> -->
					<rich-text :nodes="shaopInfo.content"></rich-text>
				</div>
				<div class="shopTable" v-if="tabIndex==1">
					<div class="items" v-for="(item,index) in shaopInfo.types" :key="index">
						<p class="p1">{{item.name}}</p>
						<p class="p2">{{item.value}}</p>
					</div>
				</div>
			</div>
		</view>
		<!-- 规格弹窗 -->
		<view class="spec-popup" v-if="showSpecPopup">
			<!-- 遮罩层 -->
			<view class="popup-mask" @click="closePopup"></view>

			<!-- 弹窗内容 -->
			<view class="popup-content">
				<!-- 商品信息头部 -->
				<view class="popup-header">
					<image class="product-thumb" :src="selectedSpec.thumb" mode="aspectFill" alt="商品图片">
					</image>
					<view class="product-info">
						<view class="product-price">
							<text class="price-sign">¥</text>
							<text class="price-value">{{ selectedSpec.price }}</text>
						</view>
						<view class="product-stock">库存: {{ selectedSpec.num }}件</view>
					</view>
					<view class="close-btn" @click="closePopup">×</view>
				</view>

				<!-- 规格选择区域 -->
				<view class="spec-selector">
					<view class="spec-title">选择规格</view>
					<view class="spec-options">
						<view class="spec-option" :class="{ 'active': selectedSpec.specs_id === item.specs_id }"
							@click="selectSpec(item)" v-for="(item, index) in specList" :key="item.specs_id">
							{{ item.name }}
						</view>
					</view>
				</view>

				<!-- 数量选择区域 -->
				<view class="quantity-selector">
					<view class="quantity-title">购买数量</view>
					<view class="quantity-controls">
						<view class="quantity-btn minus" @click="decreaseQuantity">-</view>
						<view class="quantity-value"><input type="number" :value="buyQuantity" @input="numVal" /></view>
						<view class="quantity-btn plus" @click="increaseQuantity">+</view>
					</view>
				</view>

				<!-- 底部操作按钮 -->
				<view class="popup-actions">
					<view class="action-btn add-cart" v-if="specType==0" @tap="buyCangku()">
						加入仓库
					</view>
					<view class="action-btn buy-now"  v-if="specType==1" @tap="toBuy">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="l">
				<view class="goHome">
					<image src="../../static/images/icon1.png" mode=""></image>
					<p>首页</p>
				</view>
				<navigator url="/pages/cart/cart" open-type="switchTab">
					<view class="goHome">
						<image src="../../static/images/icon2.png" mode=""></image>
						<p>仓库</p>
					</view>
				</navigator>

			</view>
			<view class="r">
				<!-- @tap="buyCangku()" -->
				<view class="btn" @tap="showSpec(0)">
					加入仓库
				</view>
				<!-- @tap="toBuy" -->
				<view class="btn btn2" @tap="showSpec(1)">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				shopInfo: {},
				tabIndex: 0,
				index: 0,
				array: ['请选择件数', '1', '2', '3', '4'],
				title: 'Hello',
				selectedSpec: {},
				specList: [],
				specType:0,
				// 当前选中的规格
				selectedSpec: {},
				// 购买数量
				buyQuantity: 1,
				showSpecPopup: false,
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.getInfo(options.id)
			}
		},
		onShareAppMessage() {
			return {
				title: '冰火泉380ml 24', // 分享标题
				path: '', // 分享路径，默认当前页面路径
				imageUrl: '/static/images/shop1.jpg', // 分享图片
				success(res) {
					console.log('分享成功', res);
				},
				fail(err) {
					console.log('分享失败', err);
				}
			}
		},
		methods: {
			showSpec(num){
				this.specType = num;
				this.showSpecPopup = true
			},
			getInfo(id) {
				request({
					url: 'site/goods-view',
					method: 'get',
					data: {
						id: id
					}
				}).then(res => {
					if (res.status == 200) {
						this.shopInfo = res.data;
						this.specList = res.data.specs_list;
						this.selectedSpec = this.specList[0];
						console.log(JSON.stringify(this.specList))
					}
				})

			},
			// 加入仓库
			buyCangku() {

				request({
					url: 'user/add-godown	',
					method: 'post',
					data: {
						gid: this.shopInfo.id,
						num: 1,
						remarks: '',
						specs_id:this.selectedSpec.specs_id
					}
				}).then(res => {
					if (res.status == 200) {
						console.log(res)
						this.buy(res.data.order_sn)
					}
				})
			},
			buy(order_sn) {
				request({
					url: 'user/pay',
					method: 'post',
					data: {
						order_sn: order_sn
					}
				}).then(res => {
					if (res.status == 200) {
						console.log(res)
						this.pay(res.data)
						this.toMSg()

					}
				})
			},
			pay(payParams) {
				// 修正参数名并转换类型
				const paymentParams = {
					appId: String(payParams.appId),
					timeStamp: String(payParams.timeStamp), // 关键修正：从 timesTamp 取值
					nonceStr: String(payParams.nonceStr),
					package: String(payParams.package),
					signType: String(payParams.signType),
					paySign: String(payParams.paySign)
				};

				// 检查必需参数
				const requiredParams = ['appId', 'timeStamp', 'nonceStr', 'package', 'signType', 'paySign'];
				const missingParams = requiredParams.filter(param => !paymentParams[param]);

				if (missingParams.length > 0) {
					console.error('缺少支付参数:', missingParams);
					uni.showToast({
						title: '支付参数缺失',
						icon: 'none'
					});
					return;
				}

				console.log('修正后的支付参数:', paymentParams);
				// 调起支付
				uni.requestPayment({
					timeStamp: paymentParams.timeStamp,
					nonceStr: paymentParams.nonceStr,
					package: paymentParams.package,
					signType: 'MD5',
					paySign: paymentParams.paySign,
					success(res) {

						console.log('支付成功:', res);

						uni.switchTab({
							url: '/pages/cart/cart'
						})
					},
					fail(res) {
						// console.error('支付失败:', res);
						uni.showToast({
							title: '支付失败 ',
							icon: 'none'
						});
					}
				});
			},
			numVal(e){
				console.log(e.detail.value<1)
				let num = e.detail.value;
				
				// 不能超过库存
				if (num < parseInt(this.selectedSpec.num)) {
					this.buyQuantity = e.detail.value;
				} else {
					this.buyQuantity =1;
					// this.buyQuantity = this.selectedSpec.num;
					uni.showToast({
						title: '已达最大库存',
						icon: 'none',
						duration: 1500
					});
				}
				if(e.detail.value<1){
					this.buyQuantity =1;
					uni.showToast({
						title: '数量最小为1',
						icon: 'none',
						duration: 1500
					});
				}
			},
			toBuy() {
				
				if(this.selectedSpec.specs_id==4&&this.buyQuantity % 12 != 0){
					uni.showToast({
						title: '当前购买瓶装数量 不足整件  N*12',
						icon: 'none',
						duration: 1500
					});
					return
				}else{
					uni.navigateTo({
						url: `/pages/checkout/checkout?type=1&gid=${this.shopInfo.id}&num=${this.buyQuantity}&specsId=${this.selectedSpec.specs_id}`
					})
				}
				
			},
			toCangku() {
				uni.navigateTo({
					url: '/pages/checkout/checkout?type=0'
				})
			},
			toShopInfo(index) {
				console.log('外层点击', index);
			},
			innerClick(e) {
				console.log('内层点击');
			},
			tabChange(index) {
				this.tabIndex = index
			},
			// 关闭弹窗
			closePopup() {
				this.showSpecPopup = false;
			},

			// 选择规格
			selectSpec(spec) {
				this.selectedSpec = spec;
				// 切换规格时重置购买数量为1
				this.buyQuantity = 1;
			},

			// 减少购买数量
			decreaseQuantity() {
				if (this.buyQuantity > 1) {
					this.buyQuantity--;
				}
			},	

			// 增加购买数量
			increaseQuantity() {
				// 不能超过库存
				if (this.buyQuantity < parseInt(this.selectedSpec.num)) {
					this.buyQuantity++;
				} else {
					uni.showToast({
						title: '已达最大库存',
						icon: 'none',
						duration: 1500
					});
				}
			},
			toMSg(){
				uni.requestSubscribeMessage({
				  tmplIds: ['sMnAXXnoF7XjBT4AlPwrnhwKjgoOqirfhBsUkJPN9Ng', 'a-22GtkmzTO9QOY85NlXKN4WB8J6HE4qgge-SRRwfCo'],
				  success (res) {
				    console.log('订阅消息授权结果：', res);
				    // 可以在这里处理授权结果，例如：
				    // if (res['sMnAXXnoF7XjBT4AlPwrnhwKjgoOqirfhBsUkJPN9Ng'] === 'accept') {
				    //   console.log('第一个模板消息授权成功');
				    // }
				  },
				  fail (err) {
				    console.error('订阅消息调用失败：', err);
				  },
				  complete () {
				    // 无论成功失败都会执行
				  }
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	.shopInfo .shareBtn {
		margin: 0;
		padding: 0;
		border: none;
		background-color: transparent;
		font-size: 28rpx;
		line-height: 1;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		&::after {
			border: none;
		}
	}
</style>

<style lang="scss">
	.bottom {
		display: flex;
		background-color: #fff;
		position: fixed;
		left: 0;
		width: 100%;
		padding: 20rpx 20rpx;
		bottom: 0;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.l {
			display: flex;
		}

		.r {
			border-radius: 40rpx;
			overflow: hidden;
			display: flex;
			text-align: center;
			font-size: 30rpx;

			.btn {
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #4a90e2;
				background-color: #dbe9f9;
			}

			.btn2 {
				background-color: #4a90e2;
				color: #fff;
			}
		}

		.goHome {
			text-align: center;
			font-size: 24rpx;
			margin-right: 30rpx;

			image {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin: 0 auto;
			}
		}

	}

	.shopMain {
		padding-bottom: 130rpx;
	}

	.shopTable {
		padding: 20rpx;

		.items {
			width: 100%;
			display: flex;
			border: 1px solid #eee;
			min-height: 100rpx;

			p {
				font-size: 30rpx;
				display: flex;
				align-items: center;
			}

			.p1 {
				width: 200rpx;
				border-right: 1px solid #eee;
				text-align: center;
				justify-content: center;
				color: #666;
			}

			.p2 {
				width: 200rpx;
				flex: 1;
				box-sizing: border-box;
				padding-left: 20rpx;
			}
		}
	}

	.shopImg {
		padding: 20rpx;

		image {
			display: block;
			width: 100%;
		}
	}

	.shaopInfo {
		margin-top: 30rpx;
		background-color: #fff;

		.tabT {
			height: 100rpx;
			display: flex;
			border-bottom: 1px solid #eee;

			p {
				color: #666;
				line-height: 100rpx;
				text-align: center;
				width: 50%;

				&.active {
					color: #4a90e2;
				}
			}
		}
	}

	.pickerSlide {
		background-color: #fff;
		padding: 0 30rpx;
		margin: 20rpx 0;
		font-size: 28rpx;
		color: #333;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.r {
			display: flex;
			align-items: center;
		}

		.jt {

			margin-left: 20rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				display: block;
			}
		}
	}

	page {
		background-color: #f5f5f5;
		/* 灰色背景 */
		min-height: 100vh;
		/* 确保高度占满屏幕 */
	}

	.shopInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;

		.price {
			color: #4a90e2;
			font-size: 32rpx;
			font-weight: bold;

			span {
				font-size: 42rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin: 25rpx 0;
		}

		.type {
			color: #666;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.slide {
		width: 100%;

		swiper {
			height: 750rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	.notDelivery {
		background-color: #fff;
		font-size: 24rpx;

		span {
			color: red;
		}
	}



	/* 弹窗整体样式 */
	.spec-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* 遮罩层 */
	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗内容容器 */
	.popup-content {
		width: 100%;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: 30rpx;
		animation: slideUp 0.3s ease-out;
		position: relative;
		z-index: 3;
	}

	/* 弹窗头部商品信息 */
	.popup-header {
		display: flex;
		padding: 30rpx;
		position: relative;
		border-bottom: 1px solid #f5f5f5;
	}

	.product-thumb {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		margin-right: 20rpx;
		margin-top: -60rpx;
		/* 向上偏移营造悬浮效果 */
		border: 4rpx solid #fff;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.product-price {
		color: #f5222d;
		font-size: 36rpx;
		margin-bottom: 10rpx;
	}

	.price-sign {
		font-size: 28rpx;
	}

	.price-value {
		font-weight: bold;
	}

	.product-stock {
		font-size: 26rpx;
		color: #888;
	}

	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.1);
		color: #666;
		text-align: center;
		line-height: 50rpx;
		font-size: 34rpx;
	}

	/* 规格选择区域 */
	.spec-selector {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.spec-title {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.spec-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.spec-option {
		min-width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 2rpx solid #ddd;
		border-radius: 35rpx;
		font-size: 28rpx;
		padding: 0 20rpx;
	}

	.spec-option.active {
		border-color: #ff7d00;
		background-color: rgba(255, 121, 0, 0.1);
		color: #ff7d00;
	}

	/* 数量选择区域 */
	.quantity-selector {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.quantity-title {
		font-size: 30rpx;
		color: #666;
	}

	.quantity-controls {
		display: flex;
		align-items: center;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		text-align: center;
		line-height: 60rpx;
		font-size: 36rpx;
	}

	.quantity-value {
		width: 80rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 0 20rpx;
	}

	/* 底部操作按钮 */
	.popup-actions {
		display: flex;
		padding: 20rpx 30rpx;
		gap: 20rpx;
	}

	.action-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.add-cart {
		background-color: #ff9500;
	}

	.buy-now {
		background-color: #ff4d4f;
	}

	/* 弹窗动画 */
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>